<template>
  <div class="page-container">
    <!-- 添加侧边栏切换按钮 -->
    <div class="sidebar-toggle" @click="toggleSidebar">
      <i class="el-icon-s-fold"></i>
    </div>
    <div class="cyber-background">
      <div class="particle-container">
        <div v-for="i in 30" :key="i" class="particle"></div>
      </div>
      <div class="cyber-grid"></div>
    </div>
    <!-- 顶部导航 -->
    <el-header class="main-header">
      <Header></Header>
  </el-header>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧固定导航 -->
      <aside class="left-sidebar" :class="{'is-visible': isSidebarVisible}">
        <!-- 导航菜单 -->
        <nav class="nav-menu">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="white" 
              text-color="black"
            active-text-color="#3498db">
              <el-menu-item index="1" @click="showAllPost(); handleMenuClick()">
                <i class="el-icon-user"></i>
              <span>当前推荐</span>
              </el-menu-item>
              <el-menu-item index="2" @click="handleMenuClick">
                <i class="el-icon-user"></i>
              <span>我的发布</span>
              </el-menu-item>
              <el-menu-item index="3" @click="showMyLikes(); handleMenuClick()">
                <i class="el-icon-circle-check"></i>
              <span>我的喜欢</span>
              </el-menu-item>
              <el-menu-item index="4" @click="showMyCollections(); handleMenuClick()">
                <i class="el-icon-menu"></i>
              <span>我的收藏</span>
              </el-menu-item>
              <el-menu-item index="5" @click="handleMenuClick">
                <i class="el-icon-video-play"></i>
              <span>浏览记录</span>
              </el-menu-item>
            </el-menu>
        </nav>

        <!-- 积分排行榜 -->
        <div class="rank-board">
          <div class="rank-title">热度排行榜</div>
          <div class="rank-list">
            <div class="rank-item" v-for="(item,index) in hotList.slice(0, 5)" :key="index">
              <span class="rank-number">{{item.rank}}</span>
              <span class="rank-name">{{item.name}}</span>
              <span class="rank-score">{{item.points}}</span>
          </div>
        </div>
        </div>
      </aside>

      <!-- 中间内容区域 -->
      <main class="main-area">
        <!-- 顶部搜索和发布 -->
        <div class="top-actions">
          <div class="search-box">
            <el-input 
              placeholder="请输入搜索内容" 
              v-model="searchText"
              @keyup.enter.native="handleSearch">
            </el-input>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
      </div>
          <div class="sort-actions">
            <el-radio-group v-model="searchParams.order" @change="handleSearch">
              <el-radio-button :label="1">最新发布</el-radio-button>
              <el-radio-button :label="2">最高热度</el-radio-button>
            </el-radio-group>
          </div>
          <el-button type="primary" class="publish-btn" @click="goPbulic">我要发布</el-button>
      </div>

        <!-- 分类导航 -->
        <nav class="category-nav">
        <span 
            v-for="(item, index) in chanelList" 
        :key="index"
        @click="showPostByChanel(index+1)"
            class="category-item">
            {{ item.name }}
        </span>
        </nav>

        <!-- 帖子列表区域 -->
        <div class="posts-container">
          <div class="post-list" :class="{'full-width': isFullWidth}">
            <article class="post-card" v-for="(item,index) in filteredPostList" :key="index">
              <!-- 用户信息 -->
              <div class="post-header">
                <div class="user-avatar">
                  <img :src="item.userDetailVO.image" :alt="item.userDetailVO.username">
      </div>
                <div class="post-meta">
                  <h3 class="user-name">{{item.userDetailVO.username}}</h3>
                  <time class="post-time">{{item.createdTime}}</time>
              </div>
              </div>

              <!-- 帖子内容 -->
              <div class="post-content" 
                @click="handlePostClick(item)"
                @mouseenter="handlePostView(item)">
                <h2 class="post-title">{{item.title}}</h2>
                <p class="post-text">{{ item.content }}</p>
                <!-- 图片网格 -->
              <div v-if="item.images && item.images.length" class="post-images">
                <img
                    v-for="(img, imgIndex) in item.images"
                    :key="imgIndex"
                  :src="img.url"
                  class="post-image"
                    alt="帖子图片"
                    @click.stop="showImagePreview(img.url)"
                />
              </div>
            </div>

              <!-- 交互操作栏 -->
              <div class="post-actions">
                <div class="action-item">
                <i class="el-icon-video-play"></i>
                <span>{{item.views}}</span>
              </div>
                <div class="action-item" @click="addCollection(item.postId)">
                  <i class="el-icon-star-off" :class="{'is-active': item.collectedOrNot}"></i>
                <span>{{item.collection}}</span>
              </div>
                <div class="action-item">
                  <i class="el-icon-share"></i>
                <span>{{item.collection}}</span>
              </div>
                <div class="action-item" @click="addLike(item.postId)">
                  <i class="el-icon-thumb" :class="{'is-active': item.likedOrNot}"></i>
                <span>{{item.likes}}</span>
              </div>
                <div class="action-item" @click="toggleWidth(item.postId)">
                  <i class="el-icon-chat-line-round"></i>
                <span>{{item.comment}}</span>
              </div>
              </div>
            </article>
            </div>
          </div>
      </main>

      <!-- 右侧评论区 -->
      <aside class="right-sidebar" :class="{'is-hidden': isFullWidth}">
        <div class="comments-container">
          <!-- 评论头部 -->
          <div class="comments-header">
            <h3>评论区</h3>
            <button class="close-btn" @click="closeComent">×</button>
        </div>
        
          <!-- 评论列表 -->
          <div class="comments-list">
            <div class="comment-item" v-for="(item,index) in commentList" :key="index">
              <div class="comment-user">
                <div class="comment-avatar">
                  <img :src="item.image" :alt="item.username">
                </div>
                <span class="comment-username">{{ item.authorName }}</span>
                <time class="comment-time">{{ formatTime(item.createdTime) }}</time>
      </div>
 
              <div class="comment-main">
                <p class="comment-content" @click="showReplyInput(item.id)">{{ item.content }}</p>
                
                <div class="comment-actions">
                  <div class="action-btns">
                    <div class="like-btn" @click="addCommentLike(item.id, item.postId)">
                      <i class="el-icon-thumb" :class="{'is-active': isfirstComLike[item.id]}"></i>
                      <span>{{ item.likes }}</span>
      </div>
                  </div>
                </div>

                <!-- 回复输入框 -->
                <div class="reply-input" v-if="item.id === activeReplyId">
                  <el-input 
                    v-model="replyContent" 
                    placeholder="回复评论..." 
                    type="textarea"
                    :rows="2">
                  </el-input>
                  <div class="reply-actions">
                    <el-button size="small" @click="cancelReply">取消</el-button>
                    <el-button type="primary" size="small" @click="submitReply(item.id)">发表回复</el-button>
          </div>
              </div>
              </div>
              
              <!-- 二级评论列表 -->
              <div class="reply-list" v-if="item.replyList && item.replyList.length">
                <div class="reply-item" v-for="(reply, replyIndex) in item.showAllReplies ? item.replyList : [item.replyList[0]]" :key="replyIndex">
                  <div class="reply-user">
                    <div class="reply-avatar">
                      <img :src="reply.image" :alt="reply.authorName">
                </div>
                    <div class="reply-info">
                      <span class="reply-username">{{ reply.authorName }}</span>
                      <span class="reply-time">{{ formatTime(reply.createdTime) }}</span>
              </div>
            </div>
                  <p class="reply-content">{{ reply.content }}</p>
                  <div class="reply-actions">
                    <div class="like-btn" 
                      :class="{'liked': replyLikeStatus[reply.id]}" 
                      @click="addReplyLike(reply.id, item.id)">
                      <i class="el-icon-thumb" :class="{'liked': replyLikeStatus[reply.id]}"></i>
                      <span>{{ reply.likes || 0 }}</span>
                    </div>
                  </div>
          </div>

                <div class="expand-replies" v-if="item.replyList.length > 1">
                  <el-button 
                    type="text"
                    class="expand-btn" 
                    @click="toggleReplies(item)">
                    {{ item.showAllReplies ? '收起回复' : `展开更多${item.replyList.length - 1}条回复` }}
                  </el-button>
          </div>
        </div>
      </div>
      </div>

          <!-- 评论输入框 -->
          <div class="comment-input">
            <el-input 
              v-model="content" 
              type="textarea"
              :rows="3"
              placeholder="写下你的评论...">
            </el-input>
            <el-button type="primary" @click="addCommentFirst(currentId)">发表评论</el-button>
          </div>
        </div>
      </aside>
      </div>

    <!-- 添加图片预览的Dialog -->
    <el-dialog
      :visible.sync="imagePreviewVisible"
      :show-close="true"
      custom-class="image-preview-dialog"
      :modal="true"
      :append-to-body="true"
      width="80%">
      <img :src="previewImageUrl" class="preview-image" alt="预览图片" />
    </el-dialog>
    <Footer></Footer>
  </div>
</template>

<script>
import axios from '../config/http';
export default {
  components: {
    Header: () => import("@/components/Header.vue"),
    Footer: () => import("@/components/Footer.vue")
  },
  data() {
    return {
      input: '',
      isFullWidth: true,
      chanelList: '',
      postList: '',
      count: 6,
      postsId: '',
      postLikeStatus: {},
      postCollectionStatus: {},
      commentList: [],
      content: '',
      isfirstComLike: {},
      currentId: '',
      hotList: [],
      filterType: 'all',
      color: '',
      searchText: '',
      searchParams: {
        pageNo: 1,
        pageSize: 10,
        order: 1,
        isAsc: false,
        content: null,
        channelId: null
      },
      activeReplyId: null, // 当前激活的回复输入框ID
      replyContent: '', // 回复内容
      commentReplies: {}, // 存储评论的回复列表
      replyLikeStatus: {}, // 存储二级评论的点赞状态
      viewedPosts: new Set(), // 已查看帖子的记录
      lastViewTime: {}, // 记录每个帖子最后一次浏览的时间
      imagePreviewVisible: false, // 控制图片预览对话框的显示
      previewImageUrl: '', // 当前预览的图片URL
      isSidebarVisible: false, // 控制侧边栏显示状态
    };
  },
  mounted() {
    this.getList();
    this.getChannelList();
    this.getRank();
    
    // 添加窗口大小变化监听
    window.addEventListener('resize', () => {
      if (window.innerWidth > 992) {
        this.isSidebarVisible = false;
      }
    });
  },
  computed: {
    // 计算属性，根据 filterType 过滤帖子列表
    filteredPostList() {
      switch (this.filterType) {
        case 'liked':
          return this.postList.filter(item => item.likedOrNot);
        case 'collected':
          return this.postList.filter(item => item.collectedOrNot);
        default:
          return this.postList;
      }
    }
  },
  methods: {
    // 跳转发布
    goPbulic() {
      this.$router.push('/publicPost');
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 切换评论区显示
    async toggleWidth(postId) {
      if (this.currentId !== postId || this.isFullWidth) {
        this.isFullWidth = false;
        this.loadComments(postId);
      } else {
        this.isFullWidth = true;
      }
    },

    // 加载评论
    async loadComments(postId) {
      try {
        const result = await axios.post('/pss/comment/load', { postId });
        if (result.data.code === 200) {
          const commentList = result.data.data.data;
          // 为每个评论加载回复
          await Promise.all(commentList.map(async (comment) => {
            comment.showAllReplies = false;
            try {
              const replyResponse = await axios.post('/pss/comment_repay/load', {
                commentId: comment.id,
                size: 999
              });
              if (replyResponse.data.code === 200) {
                const replies = replyResponse.data.data.data || [];
                replies.forEach(reply => {
                  // 根据operation判断点赞状态：0表示已点赞，1表示未点赞
                  this.$set(this.replyLikeStatus, reply.id, reply.operation === 0);
                });
                this.$set(comment, 'replyList', replies);
              }
            } catch (error) {
              console.error('加载回复失败:', error);
              this.$set(comment, 'replyList', []);
            }
          }));

          commentList.forEach(item => {
            this.$set(this.isfirstComLike, item.id, item.operation === 0);
          });
          this.commentList = commentList;
          this.currentId = postId;

          // 更新帖子的评论数
          const post = this.postList.find(p => p.postId === postId);
          if (post) {
            post.comment = commentList.reduce((total, comment) => {
              return total + 1 + (comment.replyList ? comment.replyList.length : 0);
            }, 0);
          }
        }
      } catch (error) {
        console.error('加载评论失败:', error);
        this.$message.error('加载评论失败，请稍后重试');
      }
    },

    // 关闭评论区
    closeComent() {
      this.isFullWidth = true;
    },

    // 获取帖子列表
    async getList(params = {}) {
      try {
        // 合并查询参数
        const queryParams = {
          ...this.searchParams,
          ...params
        };
        
        // 如果有搜索内容，更新到查询参数
        if (this.searchText.trim()) {
          queryParams.content = this.searchText.trim();
        }

        const result = await axios.get('/pss/post/list', {
          params: queryParams
        });

        if (result.data.code === 200) {
          const newPostList = result.data.data.data.list;
      newPostList.forEach(item => {
        this.postLikeStatus[item.postId] = item.likedOrNot;
        this.postCollectionStatus[item.postId] = item.collectedOrNot;
      });
      this.postList = newPostList;
        } else {
          this.$message.error(result.data.msg || '获取帖子列表失败');
        }
      } catch (error) {
        console.error('获取帖子列表失败:', error);
        this.$message.error('获取帖子列表失败');
      }
    },
    // 获取分类列表
    async getChannelList() {
      const result = await axios.get(`/pss/channel/list`);
      this.chanelList = result.data.data.data;
    },
    // 点赞帖子
    async addLike(postsId) {
      try {
      const islike = this.postLikeStatus[postsId];
      const operation = islike ? 0 : 1;
        const response = await axios.post('/pss/post/like', { operation, postsId });
        if (response.data.code === 200) {
          // 更新点赞状态
          this.postLikeStatus[postsId] = !islike;
          // 重新获取列表以更新热度
          await this.getList();
          // 更新热度榜
          await this.getRank();
        }
      } catch (error) {
        this.$message.error('点赞失败');
      }
    },
    // 收藏帖子
    async addCollection(postsId) {
      try {
      const isCollection = this.postCollectionStatus[postsId];
      const operation = isCollection ? 0 : 1;
        const response = await axios.post('/pss/post/collect', { operation, postsId });
        if (response.data.code === 200) {
          // 更新收藏状态
          this.postCollectionStatus[postsId] = !isCollection;
          // 重新获取列表以更新热度
          await this.getList();
          // 更新热度榜
          await this.getRank();
        }
      } catch (error) {
        this.$message.error('收藏失败');
      }
    },
    // 显示回复输入框
    showReplyInput(commentId) {
      this.activeReplyId = commentId;
      this.replyContent = '';
    },
    // 取消回复
    cancelReply() {
      this.activeReplyId = null;
      this.replyContent = '';
    },
    // 提交回复
    async submitReply(commentId) {
      if (!this.replyContent.trim()) {
        this.$message.warning('请输入回复内容');
        return;
      }

      try {
        const response = await axios.post('/pss/comment_repay/save', {
          commentId,
          content: this.replyContent,
          postId: this.currentId
        });

        if (response.data.code === 200) {
          this.$message.success('回复成功');
          this.replyContent = '';
          this.activeReplyId = null;
          // 重新加载该评论的回复
          await this.loadComments(this.currentId);
          // 更新帖子的评论数
          const post = this.postList.find(p => p.postId === this.currentId);
          if (post) {
            post.comment = (post.comment || 0) + 1;
          }
        } else {
          this.$message.error(response.data.msg || '回复失败');
        }
      } catch (error) {
        console.error('提交回复失败:', error);
        this.$message.error('回复失败，请稍后重试');
      }
    },
    // 切换回复展示
    toggleReplies(comment) {
      this.$set(comment, 'showAllReplies', !comment.showAllReplies);
    },
    // 点赞一级评论
    async addCommentLike(commentId, postId) {
      try {
      const isLiked = this.isfirstComLike[commentId];
        // 当前已点赞，发送1表示取消点赞；当前未点赞，发送0表示点赞
        const operation = isLiked ? 1 : 0;
        const response = await axios.post('/pss/comment/like', { 
          commentId, 
          operation 
        });
        
        if (response.data.code === 200) {
          // 更新本地点赞状态
          this.$set(this.isfirstComLike, commentId, !isLiked);
          // 重新加载评论列表以更新点赞数
          await this.loadComments(postId);
          this.$message.success(isLiked ? '取消点赞成功' : '点赞成功');
        } else {
          this.$message.error(response.data.msg || '操作失败');
        }
      } catch (error) {
        console.error('评论点赞失败:', error);
        this.$message.error('操作失败，请稍后重试');
      }
    },
    // 添加一级子评论
    async addCommentFirst(postId) {
      if (!this.content.trim()) {
        this.$message.warning('请输入评论内容');
        return;
      }
      try {
        const response = await axios.post('/pss/comment/save', { 
          postId: this.currentId, 
          content: this.content 
        });
        if (response.data.code === 200) {
          this.$message.success('评论成功');
      this.content = '';
          // 重新获取评论列表
          await this.loadComments(postId);
          // 更新帖子的评论数
          const post = this.postList.find(p => p.postId === postId);
          if (post) {
            post.comment = (post.comment || 0) + 1;
          }
          // 重新获取帖子列表以更新热度
          await this.getList();
          // 更新热度榜
          await this.getRank();
        }
      } catch (error) {
        this.$message.error('评论失败');
      }
    },
    // 获取积分排行榜
       // 获取积分排行榜
       async getRank() {
      try {
        const result = await axios.get('/pss/boards', { params: { pageNo: 1,pageSize:10 } });
        if (result.data.code === 200 && result.data.data && result.data.data.boardList) {
          this.hotList = result.data.data.boardList;
        } else {
          this.hotList = [];
        }
      } catch (error) {
        console.error('获取排行榜失败:', error);
        this.$message.error('获取排行榜失败');
        this.hotList = [];
      }
    },
    // 显示当前推荐
    async showAllPost() {
      this.filterType = 'all';
      await this.getList();
    },
    // 显示我的喜欢
    async showMyLikes() {
      this.filterType = 'liked';
      await this.getList();
    },
    // 显示我的收藏
    async showMyCollections() {
      this.filterType = 'collected';
      await this.getList();
    },
    // 显示当前频道下的帖子
    async showPostByChanel(channelId) {
      this.searchParams.channelId = channelId;
      await this.getList();
    },

    // 时间格式化方法
    formatTime(isoTime) {
      if (!isoTime) return '';
      const date = new Date(isoTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    // 搜索帖子
    async handleSearch() {
      this.searchParams.pageNo = 1; // 重置页码
      await this.getList();
    },
    // 重置搜索
    resetSearch() {
      this.searchText = '';
      this.searchParams = {
        pageNo: 1,
        pageSize: 10,
        order: 1,
        isAsc: false,
        content: null,
        channelId: null
      };
      this.getList();
    },
    // 修改点赞二级评论的方法
    async addReplyLike(replyId, commentId) {
      try {
        const isLiked = this.replyLikeStatus[replyId];
        // 当前已点赞，发送1表示取消点赞；当前未点赞，发送0表示点赞
        const operation = isLiked ? 1 : 0;
        
        // 立即更新UI状态，提供即时反馈
        this.$set(this.replyLikeStatus, replyId, !isLiked);
        
        const response = await axios.post('/pss/comment_repay/like', {
          commentRepayId: replyId,
          operation
        });

        if (response.data.code === 200) {
          // 更新点赞数量
          const comment = this.commentList.find(c => c.id === commentId);
          if (comment && comment.replyList) {
            const reply = comment.replyList.find(r => r.id === replyId);
            if (reply) {
              reply.likes = isLiked ? Math.max(0, reply.likes - 1) : (reply.likes + 1);
            }
          }
          
          this.$message.success(isLiked ? '取消点赞成功' : '点赞成功');
        } else {
          // 如果请求失败，恢复原来的状态
          this.$set(this.replyLikeStatus, replyId, isLiked);
          this.$message.error(response.data.msg || '操作失败');
        }
      } catch (error) {
        // 发生错误时恢复原来的状态
        this.$set(this.replyLikeStatus, replyId, isLiked);
        console.error('回复点赞失败:', error);
        this.$message.error('操作失败，请稍后重试');
      }
    },
    // 处理帖子点击
    handlePostClick(post) {
      this.handlePostView(post);
    },

    // 处理帖子浏览
    async handlePostView(post) {
      const postId = parseInt(post.postId);
      const now = Date.now();
      
      // 如果这个帖子从未被查看过，或者距离上次查看超过30分钟
      if (!this.viewedPosts.has(postId) || 
          (now - (this.lastViewTime[postId] || 0)) > 30 * 60 * 1000) {
        await this.addViewRecord(postId);
        this.viewedPosts.add(postId);
        this.lastViewTime[postId] = now;
      }
    },

    // 添加浏览记录
    async addViewRecord(postId) {
      try {
        const response = await axios.get('/pss/view-records/add', {
          params: { 
            postId: parseInt(postId) // 确保 postId 是整型
          }
        });
        if (response.data.code === 200) {
          // 更新帖子列表中的浏览量
          const post = this.postList.find(p => p.postId === postId);
          if (post) {
            post.views = (post.views || 0) + 1;
          }
          // 更新热度榜
          await this.getRank();
        }
      } catch (error) {
        console.error('记录浏览历史失败:', error);
      }
    },

    // 显示图片预览
    showImagePreview(imageUrl) {
      this.previewImageUrl = imageUrl;
      this.imagePreviewVisible = true;
    },

    // 切换侧边栏显示状态
    toggleSidebar() {
      this.isSidebarVisible = !this.isSidebarVisible;
    },
    
    // 在小屏幕下点击导航项时自动隐藏侧边栏
    handleMenuClick() {
      if (window.innerWidth <= 992) {
        this.isSidebarVisible = false;
      }
    },
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('resize', () => {});
  }
};
</script>

<style lang="less" scoped>
// 主题变量
@primary: #2c3e50; 
@primary-hover: #34495e; 
@secondary-bg: #ffffff; 
@card-bg: #ffffff; 
@border: rgba(0, 255, 157, 0.2); 
@highlight: #00ff9d; 
@text-main: #333333; 
@text-sub: #7f8c8d; 
@text-weak: #95a5a6; 

// 全局容器
.page-container {
  min-height: 100vh;
  background: @secondary-bg;
  position: relative;
  overflow: hidden;
}

.cyber-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;

  .particle-container {
    position: absolute;
    width: 100%;
    height: 100%;
    
    .particle {
      position: absolute;
      width: 2px;
      height: 2px;
      background: @highlight;
      border-radius: 50%;
      opacity: 0.5;
      box-shadow: 0 0 10px @highlight, 0 0 20px @highlight;

      .particle-position(@i, @x, @y, @delay, @duration) {
        &:nth-child(@{i}) {
          left: @x;
          top: @y;
          animation: float @duration infinite @delay, glow 2s infinite alternate @delay;
        }
      }

      .particle-position(1, 10%, 20%, 0.2s, 4s);
      .particle-position(2, 30%, 50%, 0.4s, 4.5s);
      .particle-position(3, 45%, 70%, 0.6s, 5s);
      .particle-position(4, 60%, 25%, 0.8s, 4.2s);
      .particle-position(5, 75%, 35%, 1s, 4.8s);
    }
  }

  .cyber-grid {
            position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: 
      radial-gradient(circle at center, transparent 0%, @secondary-bg 70%),
      repeating-linear-gradient(transparent 0%, transparent 2px, rgba(0, 255, 157, 0.05) 3px, transparent 3px, transparent 9px),
      repeating-linear-gradient(90deg, transparent 0%, transparent 2px, rgba(0, 255, 157, 0.05) 3px, transparent 3px, transparent 9px);
    animation: matrix 20s linear infinite;
    opacity: 0.3;
  }
}

// 顶部导航
.main-header {
  position: fixed;
  top: 0;
            left: 0;
  right: 0;
  z-index: 1000;
  height: 60px;
  background: @primary;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

// 主内容区域
.main-content {
  position: relative;
  z-index: 1;
  display: flex;
  margin-top: 60px;
  min-height: calc(100vh - 60px);
}

// 左侧边栏
.left-sidebar {
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  width: 280px;
  background: @card-bg;
  border-right: 1px solid @border;
  backdrop-filter: blur(20px);
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);

  .nav-menu {
    padding: 20px 0;

    .el-menu-item {
      height: 50px;
      line-height: 50px;
      margin: 8px 16px;
      border-radius: 8px;
      color: @text-main;
      transition: all 0.3s;
      
      &:hover, &.is-active {
        background: rgba(0, 255, 157, 0.1);
        color: @primary;
        box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
      }

      i {
        margin-right: 12px;
        font-size: 20px;
      }
    }
  }

  .rank-board {
    margin: 20px 16px;
    background: @card-bg;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);
    border: 1px solid @border;

    .rank-title {
      padding: 16px;
      font-weight: 600;
      color: @primary;
      text-shadow: none;
    }

    .rank-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      transition: all 0.3s;
      
      &:hover {
        background: rgba(0, 255, 157, 0.05);
      }

      .rank-number {
        width: 24px;
        font-weight: 600;
        color: @highlight;
      }

      .rank-name {
        flex: 1;
        margin: 0 12px;
  color: @text-main;
      }

      .rank-score {
        color: @text-sub;
      }
    }
  }
}

// 主区域
.main-area {
  flex: 1;
  margin-left: 280px;
  margin-right: 320px;
  padding: 24px;

  .top-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
    margin-bottom: 24px;
    background: @card-bg;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid @border;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);

    .search-box {
      display: flex;
      gap: 12px;
    flex: 1;
      max-width: 500px;

    .el-input {
        .el-input__inner {
          background: #fff;
      border: 1px solid @border;
          color: @text-main;
          transition: all 0.3s;
          border-radius: 8px;

          &:focus {
            border-color: @highlight;
            box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
          }
        }
      }

  .el-button {
        border-radius: 8px;
        transition: all 0.3s;
        border: 1px solid @border;
        
        &:first-of-type {
          background: @highlight;
    color: #fff;
          border: none;
          
    &:hover {
      background: darken(@highlight, 10%); 
            box-shadow: 0 0 20px rgba(0, 255, 157, 0.2);
          }
        }
        
        &:last-of-type {
          background: transparent;
          color: @text-main;
          
    &:hover {
      color: @highlight;
            border-color: @highlight;
            background: rgba(0, 255, 157, 0.05);
            box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
          }
        }
      }
    }

    .publish-btn {
      background: @highlight;
      border: none;
      color: #fff;
      
      &:hover {
        background: darken(@highlight, 10%);
        box-shadow: 0 0 20px rgba(0, 255, 157, 0.2);
      }
    }
  }

  .category-nav {
  display: flex;
    gap: 24px;
    margin-bottom: 24px;
    padding: 16px;
    background: @card-bg;
    border-radius: 12px;
    border: 1px solid @border;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);

    .category-item {
      color: @text-main;
      cursor: pointer;
      padding: 8px 16px;
      border-radius: 20px;
      transition: all 0.3s;
      border: 1px solid transparent;

      &:hover {
        color: @highlight;
        background: rgba(0, 255, 157, 0.05);
        border-color: @highlight;
        box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
      }
    }
  }
}

// 帖子列表
.posts-container {
  .post-card {
    background: @card-bg;
    border-radius: 12px;
    border: 1px solid @border;
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.1);
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(20px);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 30px rgba(0, 255, 157, 0.2);
      border-color: @highlight;
    }

    .post-header {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid @border;

      .user-avatar {
        width: 48px;
        height: 48px;
        border-radius: 24px;
        overflow: hidden;
        margin-right: 12px;
        border: 2px solid @border;
        box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .post-meta {
        .user-name {
          margin: 0;
          font-size: 16px;
          color: @primary;
          text-shadow: none;
        }

        .post-time {
          font-size: 14px;
          color: @text-sub;
        }
      }
    }

    .post-content {
      padding: 16px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(0, 255, 157, 0.02);
      }

      .post-title {
        margin: 0 0 12px;
        font-size: 18px;
          color: @text-main;
        text-shadow: none;
      }

      .post-text {
        color: @text-sub;
        line-height: 1.6;
        margin-bottom: 16px;
      }

      .post-images {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        
        img {
          width: 100%;
          height: 200px;
          object-fit: cover;
          border-radius: 8px;
          border: 1px solid @border;
          transition: all 0.3s;

          &:hover {
            transform: scale(1.02);
            border-color: @highlight;
            box-shadow: 0 0 20px rgba(0, 255, 157, 0.2);
          }
        }
      }
    }

    .post-actions {
        display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 12px 16px;
      border-top: 1px solid @border;

      .action-item {
        display: flex;
        align-items: center;
        gap: 4px;
        color: @text-sub;
          cursor: pointer;
        padding: 6px 12px;
        border-radius: 20px;
        transition: all 0.3s;

        i {
          font-size: 18px;
          
          &.is-active {
            color: @highlight;
            text-shadow: none;
          }
        }

          &:hover {
            color: @highlight;
          background: rgba(0, 255, 157, 0.05);
          box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
          }
        }
      }
    }
  }

// 右侧评论区
.right-sidebar {
  position: fixed;
  right: 0;
  top: 60px;
  bottom: 0;
  width: 320px;
  background: @card-bg;
  border-left: 1px solid @border;
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
  z-index: 100;
  box-shadow: -2px 0 20px rgba(0, 255, 157, 0.1);
  transform: translateX(100%);

  &.is-hidden {
    width: 0;
    border-left: none;
  }

  &:not(.is-hidden) {
    transform: translateX(0);
  }

  .comments-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);

    .comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
      padding: 16px;
      border-bottom: 1px solid @border;
      background: rgba(255, 255, 255, 0.98);

      h3 {
        margin: 0;
  color: @primary;
        font-size: 18px;
        font-weight: 600;
      }

      .close-btn {
        background: none;
  border: none;
        color: @text-sub;
        font-size: 24px;
  cursor: pointer;
        transition: all 0.3s;
        width: 32px;
        height: 32px;
    display: flex;
    align-items: center;
        justify-content: center;
      border-radius: 50%;

        &:hover {
          color: @highlight;
          background: rgba(0, 255, 157, 0.1);
        }
      }
    }

    .comments-list {
      flex: 1;
      overflow-y: auto;
      padding: 16px;

      .comment-item {
        margin-bottom: 20px;
        padding: 16px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid @border;
        transition: all 0.3s ease;

        &:hover {
          border-color: @highlight;
          box-shadow: 0 2px 12px rgba(0, 255, 157, 0.1);
          transform: translateX(-4px);
        }

        .comment-user {
    display: flex;
    align-items: center;
          gap: 12px;
          margin-bottom: 12px;

          .comment-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid @border;
            box-shadow: 0 0 15px rgba(0, 255, 157, 0.15);
            transition: all 0.3s ease;

            &:hover {
              border-color: @highlight;
              transform: scale(1.05);
            }

            img {
    width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .comment-username {
            color: @primary;
            font-weight: 600;
    font-size: 15px;
            margin-right: auto;
          }

          .comment-time {
            color: @text-sub;
            font-size: 13px;
          }
        }

        .comment-main {
          margin-left: 56px;
          
          .comment-content {
    color: @text-main;
            line-height: 1.6;
            font-size: 14px;
            padding: 8px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 8px;
            
            &:hover {
              background: rgba(0, 255, 157, 0.05);
              transform: translateX(4px);
            }
          }

          .comment-actions {
            padding: 4px 12px;
            
            .action-btns {
              display: flex;
              align-items: center;
              gap: 16px;

              .like-btn {
                display: flex;
                align-items: center;
                gap: 6px;
    color: @text-sub;
                cursor: pointer;
                padding: 4px 8px;
                border-radius: 16px;
                transition: all 0.3s ease;
                font-size: 13px;

                i {
                  font-size: 16px;
                  transition: all 0.3s ease;
                }

                &.liked, i.liked {
                  color: @highlight;
                }

                &:hover {
                  color: @highlight;
                  background: rgba(0, 255, 157, 0.05);
                  
                  i {
                    transform: scale(1.1);
                  }
                }
              }
            }
          }
        }

        .reply-input {
          margin: 8px 0;
          padding: 12px;
          background: rgba(0, 255, 157, 0.05);
          border-radius: 8px;
          border: 1px solid rgba(0, 255, 157, 0.1);

          .el-input {
            margin-bottom: 8px;

            .el-input__inner {
              border: 1px solid rgba(0, 255, 157, 0.2);
              border-radius: 8px;
              transition: all 0.3s ease;

              &:focus {
                border-color: @highlight;
                box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
              }
            }
          }

          .reply-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;

            .el-button {
              padding: 6px 16px;
              border-radius: 8px;
              transition: all 0.3s ease;

              &:last-child {
                background: @highlight;
                border-color: @highlight;
                color: white;

                &:hover {
                  background: darken(@highlight, 10%);
                  transform: translateY(-1px);
                  box-shadow: 0 2px 8px rgba(0, 255, 157, 0.2);
                }
              }
            }
          }
        }

        .reply-list {
          margin-top: 8px;
          margin-left: 56px;
          padding-left: 12px;
          border-left: 2px solid rgba(0, 255, 157, 0.1);

          .reply-item {
            margin-bottom: 8px;
            padding: 6px 10px;
            background: rgba(0, 255, 157, 0.03);
            border-radius: 6px;
            transition: all 0.3s ease;

            &:last-child {
              margin-bottom: 0;
            }

            .reply-user {
    display: flex;
    align-items: center;
              gap: 6px;
              margin-bottom: 4px;

              .reply-avatar {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid rgba(0, 255, 157, 0.1);

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }

              .reply-info {
                flex: 1;
                display: flex;
                align-items: center;
                gap: 6px;

                .reply-username {
      color: @primary;
                  font-weight: 500;
                  font-size: 13px;
    }

                .reply-time {
                  color: @text-sub;
      font-size: 12px;
                }
              }
            }

            .reply-content {
              margin-left: 30px;
              color: @text-main;
              font-size: 13px;
              line-height: 1.4;
            }

            .reply-actions {
              margin-left: 30px;
      margin-top: 2px;
              display: flex;
              justify-content: flex-end;
            }
          }

          .expand-replies {
            margin-top: 4px;
            text-align: left;
            padding-left: 30px;

            .expand-btn {
              padding: 2px 0;
      color: @text-sub;
              font-size: 12px;
              transition: all 0.3s ease;

              &:hover {
                color: @highlight;
              }
            }
          }
        }
      }
    }

    .comment-input {
      padding: 16px;
      border-top: 1px solid @border;
  display: flex;
      gap: 8px;

  .el-input {
    flex: 1;

        .el-input__inner {
          background: #fff;
    border: 1px solid @border;
          color: @text-main;
          transition: all 0.3s;

          &:focus {
            border-color: @highlight;
            box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
          }
        }
      }

      .el-button {
        background: @highlight;
        border: none;
        color: #fff;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.2), transparent);
          animation: btnGlow 3s infinite;
        }

        &:hover {
          background: darken(@highlight, 10%);
          box-shadow: 0 0 20px rgba(0, 255, 157, 0.2);
        }
      }
    }
  }
}

@keyframes matrix {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(45deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px @highlight;
  }
  100% {
    box-shadow: 0 0 20px @highlight, 0 0 30px @highlight;
  }
}

@keyframes btnGlow {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

// 响应式调整
@media screen and (max-width: 1400px) {
  .main-area {
    margin-right: 0;
  }
  
  .right-sidebar {
    transform: translateX(100%);
    
    &:not(.is-hidden) {
      transform: translateX(0);
      width: 100%;
      max-width: 400px;
    }
  }
}

@media screen and (max-width: 1200px) {
  .left-sidebar {
    width: 240px;
  }

  .main-area {
    margin-left: 240px;
  }

  .post-card {
.post-images {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media screen and (max-width: 992px) {
  .left-sidebar {
    transform: translateX(-100%);
    position: fixed;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;

    &.is-visible {
      transform: translateX(0);
    }
  }

  .main-area {
    margin-left: 0;
    padding: 16px;
  }

  .top-actions {
    flex-direction: column;
    gap: 16px;
    
    .search-box {
      width: 100%;
      max-width: 100%;
    }

    .sort-actions {
      width: 100%;
  display: flex;
      justify-content: center;
    }

    .publish-btn {
      width: 100%;
    }
  }

  .category-nav {
    overflow-x: auto;
    white-space: nowrap;
    padding: 12px;
    
    &::-webkit-scrollbar {
      height: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: @border;
      border-radius: 2px;
    }
    
    .category-item {
      display: inline-block;
      margin-right: 16px;
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main-header {
    padding: 0 16px;
  }

  .post-card {
    .post-header {
      padding: 12px;
    }

    .post-content {
      padding: 12px;

      .post-images {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }

    .post-actions {
      padding: 8px;
      flex-wrap: wrap;
      gap: 8px;
  justify-content: space-between;

      .action-item {
        flex: 1;
        min-width: calc(33.33% - 8px);
        justify-content: center;
      }
    }
  }

  .right-sidebar {
    &:not(.is-hidden) {
      width: 100%;
      max-width: none;
    }
  }

  .comments-container {
    .comment-item {
      margin-left: 0;
      
      .comment-main {
        margin-left: 0;
      }

      .reply-list {
        margin-left: 24px;
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .post-card {
    .post-header {
      .user-avatar {
        width: 40px;
        height: 40px;
      }

      .post-meta {
        .user-name {
          font-size: 14px;
        }

        .post-time {
          font-size: 12px;
        }
      }
    }

    .post-content {
      .post-title {
        font-size: 16px;
      }

      .post-text {
        font-size: 14px;
      }
    }
  }

  .comments-container {
    .comment-item {
      padding: 12px;

      .comment-user {
        .comment-avatar {
          width: 32px;
          height: 32px;
        }

        .comment-username {
          font-size: 14px;
        }

        .comment-time {
          font-size: 12px;
        }
      }

      .comment-content {
        font-size: 14px;
      }

      .reply-list {
        margin-left: 16px;
        
        .reply-item {
          padding: 8px;
          
          .reply-content {
            font-size: 13px;
          }
        }
      }
    }
  }

  .top-actions {
    .search-box {
      flex-direction: column;
      
      .el-input {
        margin-bottom: 8px;
      }
      
      .el-button {
        width: 100%;
      }
    }
  }
}

// 添加侧边栏切换按钮样式
.sidebar-toggle {
  position: fixed;
  left: 16px;
  top: 70px;
  z-index: 1001;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: @highlight;
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 255, 157, 0.2);
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.1);
    background: darken(@highlight, 10%);
  }

  @media screen and (max-width: 992px) {
    display: flex;
  }
}
</style>
